<template>
  <div style="background-color: #FFFFFF;padding: 15px">
    <span style="font-size: 19px;font-weight: 600">通知列表</span><br><br><br>
    <div  style="display: flex; ">
      <div class="type-name">所属类目：</div>
      <div class="card-container2">
        <a-tabs  type="card" class="tabs" @change="changeCategory(type)"
                 v-model:activeKey="type"
                 style="width: 470px;margin-left: 10px"
                 :tabBarStyle="{ margin: '0px',borderBottom: 'unset' }"  :tab-position="'top'">
          <a-tab-pane key="">
            <template v-slot:tab>
              <div>全部</div>
            </template>
          </a-tab-pane>
          <a-tab-pane v-for="item in dictList" :key="item.dictId">
            <template v-slot:tab>
              <div>{{ item.dictValue }}</div>
            </template>
          </a-tab-pane>
        </a-tabs><br>
      </div>
    </div>

    <a-form layout='inline' :model="myInfoNote">
      <a-form-item name="userAccount">
        <div class="course-name">通知标题：</div>
        <a-input :style="{ width: '200px' }" placeholder="请输入通知名称" v-model:value="myInfoNote.title"/>
      </a-form-item>
      <a-form-item name="userName">
        <div class="course-name">作者姓名：</div>
        <a-input :style="{ width: '200px' }" placeholder="请输入作者姓名" v-model:value="myInfoNote.author"/>
      </a-form-item>
      <a-form-item name="userName">
        <div class="course-name">关键字：</div>
        <a-input :style="{ width: '200px' }" placeholder="请输入内容关键字" v-model:value="myInfoNote.content"/>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="searchByInput" style="margin-left:15px">
          <search-outlined />
          查询
        </a-button>
        <a-button @click="refresh" style="margin-left:15px">
          <redo-outlined />
          重置
        </a-button>
      </a-form-item>
    </a-form>
    <div style="height: 20px;"></div>
  </div>

  <div class="workContent">
    <a-spin :spinning="isSpin">
      <a-table :columns="columns" :data-source="newsList" bordered :pagination="false">
        <template #bodyCell="{ column, text, record }">
          <template v-if="column.dataIndex == 'image'">
            <a-image :preview="false" style="width: 65px;height: 65px;" :src="text"></a-image>
          </template>

          <template v-if="column.dataIndex == 'content'">
            <div style="height: 30px;overflow: hidden;">
              <span v-html="text" style="line-height: 30px;"></span>
            </div>

          </template>

          <template v-if="column.dataIndex == 'typeValue'">
            <span v-if="record.type == '1'" style="color: green">{{text}}</span>
            <span v-if="record.type == '2'" style="color: red">{{text}}</span>
            <span v-if="record.type == '3'" style="color: purple">{{text}}</span>
            <span v-if="record.type == '4'" style="color: orange">{{text}}</span>
          </template>

          <template  v-if="column.dataIndex === 'operation'">
            <a style="margin-right: 10px" @click="getView(record)">预览</a>
            <a-popconfirm title="确认删除吗？" ok-text="确认" cancel-text="取消" @confirm="removeNews(record.id)">
              <a style="color: red;" href="#">删除</a>
            </a-popconfirm>
          </template>
        </template>
      </a-table>

      <div style="width: 100%;height: 55px">
        <a-pagination style="float: right;margin-top: 10px" v-model:current="current"
                      @change="changeNum(current)"
                      :total="total" show-less-items />
      </div>

    </a-spin>
  </div>

  <a-modal
      v-model:visible="viewVisible"
      :title="newsItem.title"
      ok-text="确认"
      width="100%"
      wrap-class-name="full-modal"
      cancel-text="取消"
      @ok="viewVisible = false"
  >
    <div style="width: 100%;overflow: scroll;" v-html="newsItem.content"></div>
  </a-modal>
</template>

<script setup>
import {reactive, ref} from "vue";
import {getNew, removeNew} from "@/utils/new";
import {getDict} from "@/utils/file";
import {message} from "ant-design-vue";

const myInfoNote = reactive({
  title: '',
  author: '',
  content: ''
})

const isSpin = ref(false)
const newsList = ref([])

const current = ref(1)
const type = ref('')
const total = ref()
const dictList = ref([])

const viewVisible = ref(false)
const newsItem = ref({})

const columns = reactive([
  {
    title: '通知封面',
    dataIndex: 'image',
    key: 'image',
    width: 100
  },
  {
    title: '通知标题',
    dataIndex: 'title',
    key: 'title',
    width: 210,
  },
  {
    title: '承办人',
    dataIndex: 'author',
    key: 'author',
    width: 80
  },
  {
    title: '通知内容',
    dataIndex: 'content',
    key: 'content',
    width: 300,
    ellipsis: true,
  },
  {
    title: '通知类型',
    dataIndex: 'typeValue',
    key: 'typeValue',
    width: 90
  },
  {
    title: '发布时间',
    dataIndex: 'createTime',
    key: 'createTime',
    width: 145
  },
  {
    title: '操作',
    dataIndex: 'operation',
    width: 120
  }
])

//格式化时间
function formatDate(time){
  let nyr = time.slice(0, 10)
  let sfm = time.slice(11,19)

  let newTime = nyr + ' ' + sfm

  return newTime;
}

function getNewList(author,content,title,type,current){
  isSpin.value = true
  let noticeQueryVo = {
    author: author,
    content: content,
    title: title,
    type: type,
    current: current,
    pageSize: 10
  }
  getDict('notice').then(result => {
    if (result.status == 200){
      dictList.value = result.data.data

      // console.log(noticeQueryVo)
      getNew(noticeQueryVo).then(res => {
        if (res.status == 200){
          isSpin.value = false
          newsList.value = res.data.data.records
          total.value = res.data.data.total
          // console.log(res.data.data.records)
          newsList.value.forEach(e => {
            e.createTime = formatDate(e.createTime)

            dictList.value.forEach(d => {
              if (d.dictId == e.type){
                e.typeValue = d.dictValue
              }
            })
          })
        }else{
          message.error('获取信息失败，请刷新重试')
        }
      })
    }
  })

}
getNewList('','','','',1)

const searchByInput = function (){
  getNewList(myInfoNote.author,myInfoNote.content,myInfoNote.title,type.value,1)
}

const refresh = function (){
  myInfoNote.content = ''
  myInfoNote.author = ''
  myInfoNote.title = ''
  getNewList('','','','',1)
}

const changeCategory = function (myType){
  // console.log(type)
  getNewList(myInfoNote.author,myInfoNote.content,myInfoNote.title,myType,1)
}

const changeNum = function (current){
  getNewList(myInfoNote.author,myInfoNote.content,myInfoNote.title,type.value,current)
}

const removeNews = function (id){
  // console.log(id)
  let notice = {
    id: id
  }
 removeNew(notice).then(res =>{
   if (res.status == 200){
     message.success('删除成功')
     getNewList('','','','',1)
   }else{
     message.error('删除失败')
   }
 })
}

const getView = function (item){
  // console.log(item)
  viewVisible.value = true
  newsItem.value = item
}
</script>

<style scoped>
.course-name {
  width: 100px;
  margin-left: -2px;
  text-align: center;
  line-height: 32px;
  display: inline-block;
}

.workContent{
  width: 96%;margin: 25px auto 0 auto;
}


.type-name {
  margin: 8px 0 0 14px;
  width: 75px;
  vertical-align: middle;
  display: inline-block;
}


.card-container {
  width: 76%;
  display: inline-block;
}
</style>

<style>
.card-container2 .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn{
  color: #FFFFFF;
}

.card-container2 .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab{
  background-color: #FFFFFF;
  border: 0;
}

.card-container2  .ant-tabs-card.ant-tabs-top > .ant-tabs-nav .ant-tabs-tab-active {
  background: #1890ff;
  border-radius: 4px;
  margin: 0;
  color: #FFFFFF;
}

.card-container2 .ant-tabs-card.ant-tabs-top > .ant-tabs-nav .ant-tabs-tab + .ant-tabs-tab{
  margin: 0;
}
</style>

<style>
.full-modal  .ant-modal {
    min-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
.full-modal  .ant-modal-content {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh);
  }
.full-modal .ant-modal-body {
    flex: 1;
  }
</style>